<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<div th:insert="publicHeader.html"></div>
<script th:src="@{/publicHeader.js}"></script>


<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container">

        <div class="row">
            <div class="col-md-12">
                <p style="background-color: cornflowerblue ; color: white; font-size: 30px">图书销售排行榜</p>
            </div>
        </div>

        <div class="row">
<!--            <div class="col-sm-6 col-md-4" v-for="book in bookList" >-->
            <div class="col-sm-6 col-md-4" v-for="(book,index) in bookList" >
                <div class="thumbnail">
                    <img :src="book.imgsrc" alt="..." class="col-sm-6 col-md-6" style="width: 140px;height: 130px">
                    <div class="caption text-left">
                        <p>排名:<span v-text="index+1">n</span></p>
                        <p>书名:<span v-text="book.name" >name</span></p>
                        <p>价格:<span v-text="book.price">price</span></p>
                        <p>
                            <a class="btn btn-primary" @click.prevent="seeDetail(book.id)" >详情</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="btn btn-success" >加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<script>

    console.log("------index-----")

    let app = new Vue({
        el:"#app",
        data:{
            bookList:[]
        },
        methods:{
            initBookList(){
                let vueObj = this;
                $.post("/book/topN",{n:12},function (data) {
                    console.log(data)
                    vueObj.bookList = data;
                })
            }
            ,
            seeDetail(bookId){
                console.log("去查看"+bookId+"详情")
                sessionStorage.setItem("toSeeDetailBookId",bookId)
                // sessionStorage.setItem()
                // sessionStorage.getItem()
                // sessionStorage.clear();
                // sessionStorage  只在当前页面有效,页面一关闭数据就没了

                // localStorage.setItem()
                // localStorage.getItem()
                // localStorage.clear()
                // localStorage  简单的浏览器key-value存储库,一直存在
                location.href="/singleBook.html"
            }
        },
        created(){
            this.initBookList();
        }
    })

</script>

<div th:insert="publicFooter.html"></div>

</body>
</html>